<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LOGO</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			overflow: hidden;
		}
		.box {
			width: 100%;
			height: 100vh;
			background-color: #3477F5;
			position: relative;
		}
		.box1 {
			width: 300px;
			height: 350px;
			background: white;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			border-radius: 10px;
			position: relative;
		}
		.box2 {
			width: 150px;
			height: 150px;
			line-height: 150px;
			border-radius: 50%;
			text-align: center;
			position: absolute;
			left: 80px;
			top: -83px;
			background-color: white;
			color: #999;
			font-size: 25px;
			font-weight: 800;
		}
		.box3 {
			text-align: center;
			padding-top: 70px;
			color: #999;
			font-size: 25px;
			font-weight: 800;
		}
		.box4 {
			text-align: center;
			padding-top: 40px;
			position: relative;
		}
		input {
			width: 200px;
			height: 30px;
			border: 1px solid #ccc;
			color: red;
		}
		.inp {
			margin-top: 20px;
		}
		input::placeholder {
			color: #D1D1D1;
		}
		.box5 {
			font-size: 12px;
			color: #3477F5;
			position: absolute;
			top: 97px;
			right: 55px;
			cursor: pointer;
		}
		.box6 {
			text-align: center;
			padding-top: 30px;	
		}
		.box7 {
			width: 200px;
			height: 30px;
			background-color: #3477F5;
			color: white;
			border: none;
			cursor: pointer;
		}
		.qwe {
			width: 100%;
			height: 237px;
/*			background-color: red;*/
			border: 1px solid #ccc;
			position: absolute;
			bottom: 0px;
			left: 1px;
			text-align: center;
			line-height: 237px;
			color: #ccc;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			<div class="box2">
				LOGO
			</div>
			<div class="box3">
				重置密码
			</div>
			<div class="box4">
				<input type="" name="" placeholder="请输入账号手机号码">
				<input type="" name="" class="inp" placeholder="请输入短信验证码">
				<div class="box5">发送验证码</div>
			</div>
			<div class="box6">
				<button class="box7">下一步</button>
			</div>
		</div>
		<div class="qwe">
			Copyright @ www.xxx.com, All Rights Reserved.
		</div>
	</div>
</body>
</html>